<template>
	<div style="width: 100%;height: 100%;">
		<!-- 内容 -->
		<div class="Qbody">
			
			<!-- 上半部分 -->
			<div class="bodyTop">
				<div class="topItem">
					<!-- 上半部分 左半部分-->
					<div class="itemLeft">
						<!-- 上半部分 左半部分 上半部分-->
						<div class="itemLeftTop">
							<!-- 内容1 -->
							<div class="itemLeftTopCar" @click="voucherEntryClick">
								<div class="carJG"></div>
								<div class="carItem">
									<div class="cariJG"></div>
									<!-- 图 -->
									<div class="carImgA"></div>
									<div class="carisJG"></div>
									<!-- 标题 -->
									<div class="carText">账务处理</div>
									<div class="cariJG"></div>
								</div>
								<div class="carJG"></div>
							</div>
							<!-- 间隔 -->
							<div class="itemLeftTopJG"></div>
							<!-- 内容2 -->
							<div class="itemLeftTopCar" @click="voucherQueryClick">
								<div class="carJG"></div>
								<div class="carItem">
									<div class="cariJG"></div>
									<!-- 图 -->
									<div class="carImgB"></div>
									<div class="carisJG"></div>
									<!-- 标题 -->
									<div class="carText">凭证查询</div>
									<div class="cariJG"></div>
								</div>
								<div class="carJG"></div>
							</div>
							<!-- 间隔 -->
							<div class="itemLeftTopJG"></div>
							<!-- 内容3 -->
							<div class="itemLeftTopCar" @click="accountBookQueryClick">
								<div class="carJG"></div>
								<div class="carItem">
									<div class="cariJG"></div>
									<!-- 图 -->
									<div class="carImgC"></div>
									<div class="carisJG"></div>
									<!-- 标题 -->
									<div class="carText">账簿查询</div>
									<div class="cariJG"></div>
								</div>
								<div class="carJG"></div>
							</div>
							<!-- 间隔 -->
							<div class="itemLeftTopJG"></div>
							<!-- 内容4 -->
							<div class="itemLeftTopCar" @click="monthlyFoodAnnouncementClick">
								<div class="carJG"></div>
								<div class="carItem">
									<div class="cariJG"></div>
									<!-- 图 -->
									<div class="carImgD"></div>
									<div class="carisJG"></div>
									<!-- 标题 -->
									<div class="carText">伙食公布</div>
									<div class="cariJG"></div>
								</div>
								<div class="carJG"></div>
							</div>
						</div>
						<!-- 上半部分 左半部分 间隔-->
						<div class="itemLeftJG"></div>
						<!-- 上半部分 左半部分 下半部分-->
						<div class="itemLeftBottom" style="position: relative;">
							<Spin fix v-if="form.foodLoading"></Spin>
							<div class="echartTitle">
								<!-- <div class="echartTitleJG"></div> -->
								<div class="titleText">伙食费余额变动曲线图</div>
								<div class="titleTabs" style="justify-content: space-between;align-items: center;">
									<Tabs value="本年详情" style="margin:0;" @on-click="tabsHuoShiChange($event)">
										<Tab-pane label="本年详情" name="本年详情"></Tab-pane>
										<Tab-pane label="本月详情" name="本月详情"></Tab-pane>
									</Tabs>
									<div @click="oneEchartClick">
										<Icon type="ios-expand" size="20"></Icon>
									</div>
								</div>
								<!-- <div class="echartTitleText">
									<div class="echartTitleTextOne">
										<span>伙食费余额变动曲线图</span>
									</div>
									<div class="echartTitleTextTwo">
										<Tabs value="本年详情" height="200%" style="margin:0;"
											@on-click="tabsHuoShiChange($event)">
											<Tab-pane label="本年详情" name="本年详情"></Tab-pane>
											<Tab-pane label="本月详情" name="本月详情"></Tab-pane>
										</Tabs>
									</div>
									<div class="echartTitleTextOne"
										style="flex: 1;display: flex;justify-content: flex-end;">
										<div @click="oneEchartClick">
											<Icon type="ios-expand" size="20"></Icon>
										</div>
									</div>
								</div> -->
								<!-- <div class="echartTitleJG"></div> -->
							</div>
							<div class="itemLeftBottomLine">
								<div class="echartLineJG"></div>
								<div class="echartLine">
									<v-chart :option="chartOption" autoresize></v-chart>
								</div>
								<div class="echartLineJG"></div>
							</div>
						</div>
					</div>
					<!-- 上半部分 间隔-->
					<div class="itemJG"></div>
					<!-- 上半部分 右半部分-->
					<div class="itemRight">
						<div class="itemRightTitle">
							<div class="titleText">试算平衡表{{ tableHeight }} + {{ data.length * 48 + 50 }}</div>
							<div class="titleTabs">
								<Tabs value="本年累计" style="margin:0;" @on-click="tabsChange($event)">
									<Tab-pane label="本年累计" name="本年累计"></Tab-pane>
									<Tab-pane label="本月合计" name="本月合计"></Tab-pane>
								</Tabs>
							</div>
						</div>
						<div class="itemRightTable">
							<Table border :loading="form.loading" :columns="columns" :data="data"
								:height="data.length == 0 ? '98' : tableHeight > data.length * 48 + 50 ? data.length * 48 + 50 : tableHeight"
								:size="vuex_config.tableSize">
								<template slot-scope="{ row }" slot="recmoney">
									{{ totalPrices(row.recmoney) }}
								</template>
								<template slot-scope="{ row }" slot="paymoney">
									{{ totalPrices(row.paymoney) }}
								</template>
							</Table>
						</div>
					</div>
				</div>
			</div>
			<!-- 间隔 -->
			<div class="bodyJG"></div>

			<!-- 下半部分 -->
			<div class="bodyBottom" style="position: relative;">
				<Spin fix v-if="form.fundsLoading"></Spin>
				<div class="echartTitle">
					<div class="titleText">经费账全景图</div>
					<div class="titleTabs" style="justify-content: space-between;align-items: center;">
						<Tabs value="本年累计" style="margin:0;" @on-click="tabsBTChange($event)">
							<Tab-pane label="本年累计" name="本年累计"></Tab-pane>
							<Tab-pane label="本月合计" name="本月合计"></Tab-pane>
						</Tabs>
					</div>
					<!-- <div class="echartTitleJG"></div> -->
					<!-- <div class="echartTitleText">
						<div class="echartTitleTextOne">经费账全景图</div>
						<div class="echartTitleTextTwo">
							<Tabs value="本年累计" style="margin:0;" @on-click="tabsBTChange($event)">
								<Tab-pane label="本年累计" name="本年累计"></Tab-pane>
								<Tab-pane label="本月合计" name="本月合计"></Tab-pane>
							</Tabs>
						</div>
					</div>
					<div class="echartTitleJG"></div> -->
				</div>
				<div class="itemLeftBottomLine">
					<div class="echartsPie">
						<div class="pieTitle">
							<span>收入</span>
							<div @click="twoEchartClick">
								<Icon type="ios-expand" size="20"></Icon>
							</div>
						</div>
						<div class="pieechart">
							<v-chart :option="chartOptionPieOne" autoresize></v-chart>
						</div>
					</div>
					<div class="echartsPie">
						<div class="pieTitle">
							<span>支出</span>
							<div @click="threeEchartClick">
								<Icon type="ios-expand" size="20"></Icon>
							</div>
						</div>
						<div class="pieechart">
							<v-chart :option="chartOptionPieTwo" autoresize></v-chart>
						</div>
					</div>
					<div class="echartsPie">
						<div class="pieTitle">
							<span>结存</span>
							<div @click="fourEchartClick">
								<Icon type="ios-expand" size="20"></Icon>
							</div>
						</div>
						<div class="pieechart">
							<v-chart :option="chartOptionPieThree" autoresize></v-chart>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 伙食费余额变动曲线图 弹框 -->
		<echart-modal ref="oneEchart" title="伙食费余额变动曲线图" :fullscreen="true" @onOk="onOkadd">
			<div class="echartAll">
				<v-chart :option="chartOption" autoresize></v-chart>
			</div>
		</echart-modal>

		<!-- 经费账收入饼图 弹框 -->
		<echart-modal ref="twoEchart" title="经费账收入饼图" :fullscreen="true" @onOk="onOkadd">
			<div class="echartAll">
				<v-chart :option="chartOptionPieOneAll" autoresize></v-chart>
			</div>
		</echart-modal>

		<!-- 经费账支出饼图 弹框 -->
		<echart-modal ref="threeEchart" title="经费账支出饼图" :fullscreen="true" @onOk="onOkadd">
			<div class="echartAll">
				<v-chart :option="chartOptionPieTwoAll" autoresize></v-chart>
			</div>
		</echart-modal>

		<!-- 经费账结存饼图 弹框 -->
		<echart-modal ref="fourEchart" title="经费账结存饼图" :fullscreen="true" @onOk="onOkadd">
			<div class="echartAll">
				<v-chart :option="chartOptionPieThreeAll" autoresize></v-chart>
			</div>
		</echart-modal>
	</div>
</template>
<script>
import * as echarts from 'echarts'
import TabChart from './components/tab-chart'
import { options } from 'countup'
import { refreshRem } from '@/libs/util'
import { getAccountBookListByUserAndYear, getBalanceReportByDate, getHuoShiTotalAnalysis, getTotalAnalysisBySubject } from '@/api/businessAccountingApi/essentialInformationApi'
export default {
	components: { TabChart },
	data() {
		return {
			selectFrom: {
				totalAnalysisType: 0, // 查询类型(0:年度;1:月份)-左边伙食费余额变动曲线图
				beginHuoShiTime: null, //	开始时间-左边伙食费余额变动曲线图
				endHuoShiTime: null, //	结束时间-左边伙食费余额变动曲线图
				year: null, // 账簿年度
				startyear: new Date().Format('yyyy'), //开始年度
				endyear: new Date().Format('yyyy'),//结束年度
				tiemList: null, // 查询时间-右边试算平衡
				startTime: null, // 开始时间-月初-右边试算平衡
				endTime: null, // 结束时间-月末-右边试算平衡
				accountbookId: null, // 账簿ID
				beginBTTime: null,// 开始时间-下面饼图
				endBTTime: null// 开始时间-下面饼图

			},

			name: '',
			chartTitle: '', // 表头名字
			chartLintTitle: [],//左边伙食费余额变动曲线图-x轴
			chartLintData: [],//左边伙食费余额变动曲线图-y轴
			allNum: 2000,
			chartOption: {},//伙食费余额变动曲线图
			chartOptionPieOne: {},//经费账-收入-饼图
			chartOptionPieOneTitle: [],//经费账-收入-饼图-字段名称
			chartOptionPieOneData: [],//经费账-收入-饼图-数值
			chartOptionPieOneAll: {},
			chartOptionPieTwo: {},//经费账-支出-饼图
			chartOptionPieTwoTitle: [],//经费账-支出-饼图-字段名称
			chartOptionPieTwoData: [],//经费账-支出-饼图-数值
			chartOptionPieTwoAll: {},
			chartOptionPieThree: {},//经费账-结存-饼图
			chartOptionPieThreeTitle: [],//经费账-结存-饼图-字段名称
			chartOptionPieThreeData: [],//经费账-结存-饼图-数值
			chartOptionPieThreeAll: {},
			// 表格头
			columns: [{
				title: '收方',
				slot: 'recmoney',
				align: 'right',
				minWidth: 100
			}, {
				title: '科目名称',
				key: 'subjectfullname',
				align: 'center',
				minWidth: 100
			}, {
				title: '付方',
				slot: 'paymoney',
				align: 'right',
				minWidth: 100
			}],
			form: {
				name: {
					name: '',
					id: ''
				},
				supplier: {
					name: '',
					id: ''
				},
				typeId: [],
				state: '',
				loading: false,
				fundsLoading: false,
				foodLoading: false,
				startTime: '',
				endTime: ''
			},
			data: [],
			tableHeight: 0,//右侧表格高度
			valuesss: [1, 2, 3, 2, 2]
		}
	},
	// 销毁函数时提示变回1.5秒消失
	beforeDestroy() {
		this.$Message.config({
			top: 50,
			duration: 1.5
		})
	},
	computed: {
		height() {
			if (this.data.length == 0) {
				return 98
			} else {
				return this.data.length * 48 + 50 - this.tableHeight > 0 ? this.tableHeight : this.data.length * 48 + 50
			}
		}
	},
	mounted() {
		// 重置数据，防止上次的div被上次数据撑开
		this.data = []
		this.chartLintTitle = []//左边伙食费余额变动曲线图-x轴
		this.chartLintData = []//左边伙食费余额变动曲线图-y轴
		this.chartOption = {}//伙食费余额变动曲线图
		this.chartOptionPieOne = {}//经费账-收入-饼图
		this.chartOptionPieOneTitle = []//经费账-收入-饼图-字段名称
		this.chartOptionPieOneData = []//经费账-收入-饼图-数值
		this.chartOptionPieOneAll = {}
		this.chartOptionPieTwo = {}//经费账-支出-饼图
		this.chartOptionPieTwoTitle = []//经费账-支出-饼图-字段名称
		this.chartOptionPieTwoData = []//经费账-支出-饼图-数值
		this.chartOptionPieTwoAll = {}
		this.chartOptionPieThree = {}//经费账-结存-饼图
		this.chartOptionPieThreeTitle = []//经费账-结存-饼图-字段名称
		this.chartOptionPieThreeData = []//经费账-结存-饼图-数值
		this.chartOptionPieThreeAll = {}

		setTimeout(() => {
			this.tableHeight = document.querySelector('.itemRightTable').offsetHeight - 24 // 表格自适应高度
			if (document.body.clientWidth <= 1580) {
				this.chartOptionPieOne.legend.show = false
				this.chartOptionPieOne.series[0].center = ['50%', '50%']
				this.chartOptionPieOne.title[0].left = 'center'
			}
		}, 100)
		window.addEventListener('resize', this.tableHeightChange, true)
		this.setRemUnit()
		// 函数时提示变成3秒消失
		this.$Message.config({
			top: 50,
			duration: 3
		})
		// this.eachartfunttion()

		this.getAccountBookListByUserAndYearApi() // 根据用户id查询账簿 接口
	},
	destroyed() {
		window.removeEventListener('resize', this.tableHeightChange, true)
	},

	methods: {
		setRemUnit() {
			var docEl = document.documentElement
			docEl.style.fontSize = refreshRem(1920, 1920) + 'px'
		},
		// 千位分割符
		totalPrices(recmoney) {
			const intPart = Math.trunc(recmoney)//整数部分
			let floatPart = 0
			const intPartFormat = intPart.toString().replace(/\B(?=(\d{3})+$)/g, ',')
			const valuArray = recmoney.toString().split('.')

			if (valuArray.length === 2) {//有小数部分
				if (valuArray[1]) {
					if (valuArray[1].length === 1) {
						valuArray[1] += '0'
					}
				} else {
					valuArray[1] = '00'
				}
				floatPart = valuArray[1]//取得小数部分

				return intPartFormat + '.' + floatPart
			} else {
				return intPartFormat + '.00'
			}
		},
		tableHeightChange() {
			this.tableHeight = 100
			setTimeout(() => {
				this.tableHeight = document.querySelector('.itemRightTable').offsetHeight - 24 // 表格自适应高度
				console.log("window.width:", document.body.clientWidth)
				if (document.body.clientWidth <= 1580) {
					this.chartOptionPieOne.legend.show = false
					this.chartOptionPieOne.series[0].center = ['50%', '50%']
					this.chartOptionPieOne.title[0].left = 'center'
					this.chartOptionPieOne.series[0].label.show = true
					this.chartOptionPieOne.series[0].labelLine.show = true
					this.chartOptionPieOne.series[0].emphasis.label.show = true

					this.chartOptionPieTwo.legend.show = false
					this.chartOptionPieTwo.series[0].center = ['50%', '50%']
					this.chartOptionPieTwo.title[0].left = 'center'
					this.chartOptionPieTwo.series[0].label.show = true
					this.chartOptionPieTwo.series[0].labelLine.show = true
					this.chartOptionPieTwo.series[0].emphasis.label.show = true

					this.chartOptionPieThree.legend.show = false
					this.chartOptionPieThree.series[0].center = ['50%', '50%']
					this.chartOptionPieThree.title[0].left = 'center'
					this.chartOptionPieThree.series[0].label.show = true
					this.chartOptionPieThree.series[0].labelLine.show = true
					this.chartOptionPieThree.series[0].emphasis.label.show = true
				} else {
					this.chartOptionPieOne.legend.show = true
					this.chartOptionPieOne.series[0].center = ['24%', '50%']
					this.chartOptionPieOne.title[0].left = '18%'
					this.chartOptionPieOne.series[0].label.show = false
					this.chartOptionPieOne.series[0].labelLine.show = false
					this.chartOptionPieOne.series[0].emphasis.label.show = false

					this.chartOptionPieTwo.legend.show = true
					this.chartOptionPieTwo.series[0].center = ['24%', '50%']
					this.chartOptionPieTwo.title[0].left = '18%'
					this.chartOptionPieTwo.series[0].label.show = false
					this.chartOptionPieTwo.series[0].labelLine.show = false
					this.chartOptionPieTwo.series[0].emphasis.label.show = false

					this.chartOptionPieThree.legend.show = true
					this.chartOptionPieThree.series[0].center = ['24%', '50%']
					this.chartOptionPieThree.title[0].left = '18%'
					this.chartOptionPieThree.series[0].label.show = false
					this.chartOptionPieThree.series[0].labelLine.show = false
					this.chartOptionPieThree.series[0].emphasis.label.show = false
				}
			}, 100)
		},
		// 根据用户id查询账簿 接口
		getAccountBookListByUserAndYearApi() {
			this.form.loading = true
			return new Promise((resolve) => {
				getAccountBookListByUserAndYear({
					startyear: this.selectFrom.startyear,
					endyear: this.selectFrom.endyear,
					userid: this.vuex_user.base.id// 用户id
				}).then((res) => {
					this.form.loading = false
					if (res.errorcode === 0) {
						if (res.accountbooklist.length > 0) {//存在账簿时，全局中间标题显示当前账簿年度~当前账簿年度：2022
							this.selectFrom.accountbookId = res.accountbooklist[0].accountbookId
							this.selectFrom.year = res.accountbooklist[0].year // 账簿年度
							let topTitle = '首页（当前账簿年度：' + this.selectFrom.year + ')'
							this.$cu.vuex('vuex_HeaderTitle', topTitle)
							this.selectFrom.startTime = this.selectFrom.year + '-01-01' // 起始日期-右边试算平衡
							this.selectFrom.endTime = this.selectFrom.year + '-12-31' // 结束日期-右边试算平衡
							this.selectFrom.beginHuoShiTime = this.selectFrom.year + '-01-01' //	开始时间-左边伙食费余额变动曲线图
							this.selectFrom.endHuoShiTime = new Date().Format('yyyy-MM-dd') //	结束时间-左边伙食费余额变动曲线图
							this.selectFrom.beginBTTime = this.selectFrom.year + '-01-01'// 开始时间-下面饼图
							this.selectFrom.endBTTime = new Date().Format('yyyy-MM-dd') // 开始时间-下面饼图
							this.getBalanceReportByDateApi() // 根据账户ID查询试算平衡表 接口
							this.getHuoShiTotalAnalysisApi() // 伙食费余额变动曲线图数据查询 接口
							this.getTotalAnalysisBySubjectApi() // 经费账全景图查询接口
						} else {//不存在账簿时，全局中间标题显示无当前账簿年度  ~  当前账簿年度：无
							this.$cu.vuex('vuex_HeaderTitle', '首页（当前账簿年度：无）')
							this.$Message.info("当前年度账簿不存在，以下展示数据为示例数据！")
							this.chartLintTitle = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
							this.chartLintData = [30000, 20000, 20000, 40000, 50000, 40000, 70000, 40000, 20000, 30000, 80000, 90000]
							this.oneChange(this.chartLintTitle, this.chartLintData)

							// 收入
							this.chartOptionPieOneData = [{
								recmoney: 200,
								subjectfullname: '示例数据1'
							}, {
								recmoney: 200,
								subjectfullname: '示例数据2'
							}, {
								recmoney: 200,
								subjectfullname: '示例数据4'
							}, {
								recmoney: 200,
								subjectfullname: '示例数据5'
							}, {
								recmoney: 200,
								subjectfullname: '示例数据6'
							}]

							// 支出
							this.chartOptionPieTwoData = [{
								paymoney: 200,
								subjectfullname: '示例数据1'
							}, {
								paymoney: 200,
								subjectfullname: '示例数据2'
							}, {
								paymoney: 200,
								subjectfullname: '示例数据3'
							}, {
								paymoney: 200,
								subjectfullname: '示例数据4'
							}, {
								paymoney: 200,
								subjectfullname: '示例数据5'
							}]

							// 结存
							this.chartOptionPieThreeData = [{
								remainmoney: 500,
								subjectfullname: '示例数据1'
							}, {
								remainmoney: 500,
								subjectfullname: '示例数据2'
							}, {
								remainmoney: 0,
								subjectfullname: '示例数据3'
							}]
							this.data = [{
								recmoney: 0,
								subjectfullname: '示例数据1',
								paymoney: 0
							}, {
								recmoney: 0,
								subjectfullname: '示例数据2',
								paymoney: 0
							}, {
								recmoney: 0,
								subjectfullname: '示例数据3',
								paymoney: 0
							}, {
								recmoney: 0,
								subjectfullname: '示例数据4',
								paymoney: 0
							}, {
								recmoney: 0,
								subjectfullname: '示例数据5',
								paymoney: 0
							}, {
								recmoney: 0,
								subjectfullname: '总计',
								paymoney: 0
							}]
							this.twoChange(this.chartOptionPieOneData)
							this.twoChangeAll(this.chartOptionPieOneData)
							this.threeChange(this.chartOptionPieTwoData)
							this.threeChangeAll(this.chartOptionPieTwoData)
							this.fourChange(this.chartOptionPieThreeData)
							this.fourChangeAll(this.chartOptionPieThreeData)
						}
						resolve()
					} else {
						this.$Message.error(res.resultmsg)
					}
				})
			})
		},
		// 根据账户ID查询试算平衡表 接口
		getBalanceReportByDateApi() {
			this.form.loading = true
			return new Promise((resolve) => {
				getBalanceReportByDate({
					beginDate: this.selectFrom.startTime,
					endDate: this.selectFrom.endTime,
					accountBookId: this.selectFrom.accountbookId// integer 账簿ID
				}).then((res) => {
					this.form.loading = false
					this.data = []
					if (res.retCode === 0) {
						this.tableHeight = document.querySelector('.itemRightTable').offsetHeight - 24
						this.data = res.feeRePort
						resolve()
					} else {
						this.$Message.error(res.retMsg)
					}
				})
			})
		},
		// 伙食费余额变动曲线图数据查询 接口
		getHuoShiTotalAnalysisApi() {
			this.form.foodLoading = true
			return new Promise((resolve) => {
				getHuoShiTotalAnalysis({
					accountbookId: this.selectFrom.accountbookId, // integer 账簿ID
					totalAnalysisType: this.selectFrom.totalAnalysisType, // 查询类型(0:年度;1:月份)	
					beginTime: this.selectFrom.beginHuoShiTime, //	开始时间	
					endTime: this.selectFrom.endHuoShiTime //	结束时间
				}).then((res) => {
					this.form.foodLoading = false
					this.chartLintTitle = []
					this.chartLintData = []
					if (res.errorCode === 0) {
						res.data.forEach(element => {
							this.chartLintTitle.push(element.totalAnalysisDate)
							this.chartLintData.push(element.remainmoney)
						});
						this.oneChange(this.chartLintTitle, this.chartLintData)
						resolve()
					} else {
						this.$Message.error(res.resultMsg)
					}
				})
			})
		},
		// 经费账全景图查询接口
		getTotalAnalysisBySubjectApi() {
			this.form.fundsLoading = true
			return new Promise((resolve) => {
				getTotalAnalysisBySubject({
					accountbookId: this.selectFrom.accountbookId, // integer 账簿ID
					beginTime: this.selectFrom.beginBTTime, //	开始时间	
					endTime: this.selectFrom.endBTTime //	结束时间
				}).then((res) => {
					this.form.fundsLoading = false
					if (res.errorCode === 0) {
						this.shujuchuli(res)
						resolve()
					} else {
						this.$Message.error(res.resultMsg)
					}
				})
			})
		},
		shujuchuli(valueData) {
			this.chartOptionPieOneTitle = []//经费账-收入-饼图-字段名称
			this.chartOptionPieOneData = []//经费账-收入-饼图-数值
			this.chartOptionPieTwoTitle = []//经费账-支出-饼图-字段名称
			this.chartOptionPieTwoData = []//经费账-支出-饼图-数值
			this.chartOptionPieThreeTitle = []//经费账-结存-饼图-字段名称
			this.chartOptionPieThreeData = []//经费账-结存-饼图-数值
			// 收入
			this.chartOptionPieOneData = valueData.revenueFeeList
			// 支出
			this.chartOptionPieTwoData = valueData.spendFeeList
			// 结存
			this.chartOptionPieThreeData = valueData.balanceFeeList
			this.twoChange(this.chartOptionPieOneData)
			this.twoChangeAll(this.chartOptionPieOneData)
			this.threeChange(this.chartOptionPieTwoData)
			this.threeChangeAll(this.chartOptionPieTwoData)
			this.fourChange(this.chartOptionPieThreeData)
			this.fourChangeAll(this.chartOptionPieThreeData)
		},

		// 伙食费余额变动曲线图 标签改变回调
		tabsHuoShiChange(value) {
			if (this.selectFrom.year == null || this.selectFrom.year == '' || this.selectFrom.year == undefined) {
				return
			}
			if (value == '本年详情') {
				this.selectFrom.totalAnalysisType = 0// 查询类型(0:年度;1:月份)-左边伙食费余额变动曲线图
				this.selectFrom.beginHuoShiTime = this.selectFrom.year + '-01-01' //	开始时间-左边伙食费余额变动曲线图
				this.selectFrom.endHuoShiTime = new Date().Format('yyyy-MM-dd') //	结束时间-左边伙食费余额变动曲线图
				this.getHuoShiTotalAnalysisApi() // 伙食费余额变动曲线图数据查询 接口
			} else if (value == '本月详情') {
				this.selectFrom.totalAnalysisType = 1// 查询类型(0:年度;1:月份)-左边伙食费余额变动曲线图
				this.selectFrom.beginHuoShiTime = this.selectFrom.year + '-' + new Date().Format('MM') + '-01' // 起始日期
				// this.selectFrom.endHuoShiTime = new Date().Format('yyyy-MM-dd') // 结束日期
				this.selectFrom.endHuoShiTime = new Date().Format('yyyy-MM-dd') // 结束日期
				this.getHuoShiTotalAnalysisApi() // 伙食费余额变动曲线图数据查询 接口
			}
		},
		// 右边试算平衡表 标签改变回调
		tabsChange(value) {
			if (this.selectFrom.year == null || this.selectFrom.year == '' || this.selectFrom.year == undefined) {
				return
			}
			if (value == '本年累计') {
				this.selectFrom.startTime = this.selectFrom.year + '-01-01' // 起始日期
				this.selectFrom.endTime = this.selectFrom.year + '-12-31' // 结束日期
				this.getBalanceReportByDateApi()// 根据账户ID查询试算平衡表 接口
			} else if (value == '本月合计') {
				this.selectFrom.startTime = this.selectFrom.year + '-' + new Date().Format('MM') + '-01' // 起始日期
				this.selectFrom.endTime = new Date().Format('yyyy-MM-dd') // 结束日期
				this.getBalanceReportByDateApi()// 根据账户ID查询试算平衡表 接口
			}
		},
		tabsBTChange(value) {
			if (this.selectFrom.year == null || this.selectFrom.year == '' || this.selectFrom.year == undefined) {
				return
			}
			if (value == '本年累计') {
				this.selectFrom.beginBTTime = this.selectFrom.year + '-01-01' // 起始日期
				this.selectFrom.endBTTime = this.selectFrom.year + '-12-31' // 结束日期
				this.getTotalAnalysisBySubjectApi()// 经费账全景图查询接口
			} else if (value == '本月合计') {
				this.selectFrom.beginBTTime = this.selectFrom.year + '-' + new Date().Format('MM') + '-01' // 起始日期
				this.selectFrom.endBTTime = new Date().Format('yyyy-MM-dd') // 结束日期
				this.getTotalAnalysisBySubjectApi()// 经费账全景图查询接口
			}
		},
		eachartfunttion() {
			this.chartOption.series.data = [110, 120, 210, 120, 320, 110, 220]
		},
		// 伙食费余额变动曲线图
		oneChange(valueDataTitle, valueData) {
			this.chartOption = {
				// title: {
				//   text: '折线图',
				//   textStyle: {
				//     align: 'center',
				//     // color: 'red',
				//     fontSize: 12

				//   },
				//   top: '4%',
				//   left: '0%'
				// },
				grid: {
					top: '10%',
					left: '1%',
					right: '0%',
					bottom: '8%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					data: valueDataTitle
				},
				yAxis: {
					type: 'value'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						lineStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(0, 255, 233,0)'
								}, {
									offset: 0.5,
									color: 'rgba(255, 255, 255,1)'
								}, {
									offset: 1,
									color: 'rgba(0, 255, 233,0)'
								}],
								global: false
							}
						}
					}
				},
				series: [{
					data: valueData,
					type: 'line',
					// smooth: true, //是否平滑
					// lineStyle: {//折线的投影
					//   normal: {
					//     color: '#1890FF',
					//     shadowColor: 'rgba(24, 144, 255,0.1)',
					//     shadowBlur: 0,
					//     shadowOffsetY: 5,
					//     shadowOffsetX: 5
					//   }
					// },
					// label: {
					//   show: true,
					//   position: 'top',
					//   textStyle: {
					//     color: '#fff',
					//     fontSize: 16
					//   }
					// },
					itemStyle: {// 折线的颜色
						color: '#1890FF'
						// 点的投影
						// borderColor: '#fff',
						// borderWidth: 3,
						// shadowColor: 'rgba(0, 0, 0, .3)',
						// shadowBlur: 0,
						// shadowOffsetY: 2,
						// shadowOffsetX: 2
					},
					areaStyle: {// 折线涵盖的阴影
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(24, 144, 255,0.3)'
							}, {
								offset: 1,
								color: 'rgba(24, 144, 255,0)'
							}], false),
							shadowColor: 'rgba(24, 144, 255, 0.9)',
							shadowBlur: 20
						}
					}
				}]
			}
		},

		// {a}系列名,{b}数据项名,{c}数值,{d}百分比 
		twoChange(valueData) {
			let sumValueData = 0 //支出总额
			valueData.forEach(element => {
				sumValueData = sumValueData + element.recmoney
				element.name = element.subjectfullname.length > 6 ? element.subjectfullname.slice(0, 6) + '...' : element.subjectfullname
			})
			let datas = []
			let sumItem = 0
			for (let i = 0; i < valueData.length; i++) {
				if (i > 3) {
					sumItem = sumItem + valueData[i].recmoney
				} else {
					datas.push(valueData[i])
				}
			}
			datas.push({
				recmoney: sumItem,
				subjectfullname: '其他',
				name: '其他'
			})
			sumValueData = sumValueData.toFixed(2)
			this.chartOptionPieOne = {
				title: [{
					text: '{val|' + sumValueData + '}\n{name|' + '收入总额' + '}',
					top: 'center',
					left: '18%',
					align: 'center',
					textStyle: {
						rich: {
							name: {
								fontSize: '0.12rem',
								fontWeight: 'normal',
								color: '#000',
								align: 'center',
								padding: [6, 0]

							},
							val: {
								fontSize: '0.12rem',
								fontWeight: 'bolder',
								color: '#000',
								align: 'center'
							}
						}
					}
				}],
				tooltip: {
					trigger: 'item'
				},
				legend: {
					show: true,
					right: '10%',
					top: 'center',
					orient: 'vertical',
					height: '100%',
					formatter: (name) => {
						for (var i = 0; i < datas.length; i++) {
							if (datas[i].subjectfullname == name) {
								return '{name|' + datas[i].name + '}' + '{oneData|' + datas[i].recmoney + '}' + '{twoData|' + (datas[i].recmoney / (sumValueData > 0 ? sumValueData : 1) * 100).toFixed(2) + '}' + ' %'
							}
						}
					},
					textStyle: {
						// color: '#D8DDE3',
						width: 200,
						rich: {
							name: {
								width: 40,
								padding: [0, 0, 0, 10],
								align: 'left',
								fontSize: '0.12rem',
								// color: '#D8DDE3',
							},
							oneData: {
								width: 40,
								padding: [0, 0, 0, 10],
								// color: '#D8DDE3',
								align: 'right',
								fontSize: '0.12rem',
							},
							twoData: {
								width: 30,
								padding: [0, 0, 0, 10],
								align: 'right',
								// color: '#D8DDE3',
								fontSize: '0.12rem'
							}
						}
					}
				},
				series: [{
					name: '收入',
					type: 'pie',
					radius: ['50%', '70%'],
					center: ['24%', '50%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						formatter: (name) => {
							for (var i = 0; i < datas.length; i++) {
								if (datas[i].subjectfullname == name.name) {
									return '{name|' + datas[i].name + '}' + ':' + '{twoData|' + (datas[i].recmoney / (sumValueData > 0 ? sumValueData : 1) * 100).toFixed(2) + '}' + ' %'
								}
							}
						},
						textStyle: {
							rich: {
								name: {
									align: 'left',
									fontSize: '0.12rem',
									fontWeight: 'bold'

								},
								twoData: {
									padding: [0, 0, 0, 2],
									align: 'right',
									fontSize: '0.12rem',
									fontWeight: 'bold'
								}
							}
						},
						fontSize: '0.12rem',
					},
					labelLine: {
						show: false,
						fontSize: '0.12rem',
						fontWeight: 'bold',
						normal: {
							length: 2
						}
					},
					emphasis: {
						label: {
							show: false,
							fontSize: '0.12rem',
							fontWeight: 'bold'
						}
					},
					data: [
						{ value: datas[0].recmoney, name: datas[0].subjectfullname },
						{ value: datas[1].recmoney, name: datas[1].subjectfullname },
						{ value: datas[2].recmoney, name: datas[2].subjectfullname },
						{ value: datas[3].recmoney, name: datas[3].subjectfullname },
						{ value: datas[4].recmoney, name: datas[4].subjectfullname }
					]
				}]
			}
			if (document.body.clientWidth <= 1580) {
				this.chartOptionPieOne.legend.show = false
				this.chartOptionPieOne.series[0].center = ['50%', '50%']
				this.chartOptionPieOne.title[0].left = 'center'
				this.chartOptionPieOne.series[0].label.show = true
				this.chartOptionPieOne.series[0].labelLine.show = true
				this.chartOptionPieOne.series[0].emphasis.label.show = true
			}
		},
		twoChangeAll(valueData) {
			let sumValueData = 0 //支出总额
			valueData.forEach(element => {
				sumValueData = sumValueData + element.recmoney
				element.name = element.subjectfullname.length > 6 ? element.subjectfullname.slice(0, 6) + '...' : element.subjectfullname
			})
			let datas = []
			let sumItem = 0
			for (let i = 0; i < valueData.length; i++) {
				if (i > 3) {
					sumItem = sumItem + valueData[i].recmoney
				} else {
					datas.push(valueData[i])
				}
			}
			datas.push({
				recmoney: sumItem,
				subjectfullname: '其他',
				name: '其他'
			})
			sumValueData = sumValueData.toFixed(2)
			this.chartOptionPieOneAll = {
				title: [{
					text: '{val|' + sumValueData + '}\n{name|' + '收入总额' + '}',
					top: 'center',
					left: 'center',
					align: 'center',
					textStyle: {
						rich: {
							name: {
								fontSize: '18',
								fontWeight: 'bold',
								color: '#000',
								align: 'center',
								padding: [6, 0]

							},
							val: {
								fontSize: '18',
								fontWeight: 'normal',

								color: '#000',
								align: 'center'
							}
						}
					}
				}],
				tooltip: {
					trigger: 'item'
				},
				// legend: {
				//   show: false,
				//   top: 'center',
				//   right: '20%',
				//   orient: 'vertical',

				//   formatter: (name) => {
				//     for (var i = 0; i < datas.length; i++) {
				//       if (datas[i].subjectfullname == name) {
				//         return '{name|' + datas[i].name + '}' + '{oneData|' + datas[i].recmoney + '}' + '{twoData|' + (datas[i].recmoney / (sumValueData > 0 ? sumValueData : 1) * 100).toFixed(2) + '}' + ' %'
				//       }
				//     }
				//   },
				//   textStyle: {
				//     // color: '#D8DDE3',
				//     width: 200,
				//     rich: {
				//       width: 200,
				//       name: {
				//         width: 80,
				//         padding: [0, 0, 0, 10],
				//         align: 'left',
				//         fontSize: '16',

				//         // color: '#D8DDE3',
				//       },
				//       oneData: {
				//         width: 50,
				//         padding: [0, 0, 0, 10],
				//         // color: '#D8DDE3',
				//         align: 'center',
				//         fontSize: '16',
				//       },
				//       twoData: {
				//         width: 10,
				//         padding: [0, 0, 0, 10],
				//         align: 'right',
				//         // color: '#D8DDE3',
				//         fontSize: '16',
				//       }
				//     }
				//   }
				// },
				series: [{
					name: '收入',
					type: 'pie',
					radius: ['70%', '50%'],
					center: ['50%', '50%'],
					avoidLabelOverlap: false,
					label: {
						show: true,
						formatter: (name) => {
							for (var i = 0; i < datas.length; i++) {
								if (datas[i].subjectfullname == name.name) {
									return '{name|' + datas[i].subjectfullname + '}' + '{oneData|' + datas[i].recmoney + '}' + ' 元' + '{twoData|' + (datas[i].recmoney / (sumValueData > 0 ? sumValueData : 1) * 100).toFixed(2) + '}' + ' %'
								}
							}
						},
						textStyle: {
							rich: {
								name: {
									padding: [0, 0, 0, 0],
									align: 'left',
									fontSize: 18,
								},
								oneData: {
									padding: [0, 0, 0, 20],
									align: 'right',
									fontSize: 18,
								},
								twoData: {
									padding: [0, 0, 0, 20],
									align: 'right',
									fontSize: 18
								}
							}
						},
						fontSize: 18,
					},
					labelLine: {
						show: true,
						fontSize: 18,
						normal: {
							length: 120
						}
					},
					emphasis: {
						label: {
							show: true,
							fontSize: 18,
							fontWeight: 'bold'
						}
					},
					data: [
						{ value: datas[0].recmoney, name: datas[0].subjectfullname },
						{ value: datas[1].recmoney, name: datas[1].subjectfullname },
						{ value: datas[2].recmoney, name: datas[2].subjectfullname },
						{ value: datas[3].recmoney, name: datas[3].subjectfullname },
						{ value: datas[4].recmoney, name: datas[4].subjectfullname }
					]
				}]
			}
		},
		threeChange(valueData) {
			let sumValueData = 0 //支出总额
			valueData.forEach(element => {
				sumValueData = sumValueData + element.paymoney
				element.name = element.subjectfullname.length > 6 ? element.subjectfullname.slice(0, 6) + '...' : element.subjectfullname
			})
			let datas = []
			let sumItem = 0
			for (let i = 0; i < valueData.length; i++) {
				if (i > 3) {
					sumItem = sumItem + valueData[i].paymoney
				} else {
					datas.push(valueData[i])
				}
			}
			datas.push({
				paymoney: sumItem,
				subjectfullname: '其他',
				name: '其他'
			})
			sumValueData = sumValueData.toFixed(2)
			this.chartOptionPieTwo = {
				title: [{
					text: '{val|' + sumValueData + '}\n{name|' + '支出总额' + '}',
					top: 'center',
					left: '18%',
					align: 'center',
					textStyle: {
						rich: {
							name: {
								fontSize: '0.12rem',
								fontWeight: 'normal',
								color: '#000',
								align: 'center',
								padding: [6, 0]

							},
							val: {
								fontSize: '0.12rem',
								fontWeight: 'bolder',
								color: '#000',
								align: 'center'
							}
						}
					}
				}],
				tooltip: {
					trigger: 'item'
				},
				legend: {
					right: '10%',
					top: 'center',
					orient: 'vertical',
					height: '100%',
					formatter: (name) => {
						for (var i = 0; i < datas.length; i++) {
							if (datas[i].subjectfullname == name) {
								return '{name|' + datas[i].name + '}' + '{oneData|' + datas[i].paymoney + '}' + '{twoData|' + (datas[i].paymoney / (sumValueData > 0 ? sumValueData : 1) * 100).toFixed(2) + '}' + ' %'
							}
						}
					},
					textStyle: {
						// color: '#D8DDE3',
						width: 200,
						rich: {
							name: {
								width: 40,
								padding: [0, 0, 0, 10],
								align: 'left',
								fontSize: '0.12rem',
								// color: '#D8DDE3',
							},
							oneData: {
								width: 40,
								padding: [0, 0, 0, 10],
								// color: '#D8DDE3',
								align: 'center',
								fontSize: '0.12rem',
							},
							twoData: {
								width: 30,
								padding: [0, 0, 0, 10],
								align: 'right',
								// color: '#D8DDE3',
								fontSize: '0.12rem'
							}
						}
					}
				},
				series: [{
					name: '收入',
					type: 'pie',
					radius: ['50%', '70%'],
					center: ['24%', '50%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						formatter: (name) => {
							for (var i = 0; i < datas.length; i++) {
								if (datas[i].subjectfullname == name.name) {
									return '{name|' + datas[i].name + '}' + ':' + '{twoData|' + (datas[i].paymoney / (sumValueData > 0 ? sumValueData : 1) * 100).toFixed(2) + '}' + ' %'
								}
							}
						},
						textStyle: {
							rich: {
								name: {
									align: 'left',
									fontSize: '0.12rem',
									fontWeight: 'bold'

								},
								twoData: {
									padding: [0, 0, 0, 2],
									align: 'right',
									fontSize: '0.12rem',
									fontWeight: 'bold'
								}
							}
						},
						fontSize: '0.12rem',
					},
					labelLine: {
						show: false,
						fontSize: '0.12rem',
						fontWeight: 'bold',
						normal: {
							length: 2
						}
					},
					emphasis: {
						label: {
							show: false,
							fontSize: '0.12rem',
							fontWeight: 'bold'
						}
					},
					data: [
						{ value: datas[0].paymoney, name: datas[0].subjectfullname },
						{ value: datas[1].paymoney, name: datas[1].subjectfullname },
						{ value: datas[2].paymoney, name: datas[2].subjectfullname },
						{ value: datas[3].paymoney, name: datas[3].subjectfullname },
						{ value: datas[4].paymoney, name: datas[4].subjectfullname }
					]
				}]
			}
			if (document.body.clientWidth <= 1580) {
				this.chartOptionPieTwo.legend.show = false
				this.chartOptionPieTwo.series[0].center = ['50%', '50%']
				this.chartOptionPieTwo.title[0].left = 'center'
				this.chartOptionPieTwo.series[0].label.show = true
				this.chartOptionPieTwo.series[0].labelLine.show = true
				this.chartOptionPieTwo.series[0].emphasis.label.show = true
			}
		},
		threeChangeAll(valueData) {
			let sumValueData = 0 //支出总额
			valueData.forEach(element => {
				sumValueData = sumValueData + element.paymoney
				element.name = element.subjectfullname.length > 6 ? element.subjectfullname.slice(0, 6) + '...' : element.subjectfullname
			})
			let datas = []
			let sumItem = 0
			for (let i = 0; i < valueData.length; i++) {
				if (i > 3) {
					sumItem = sumItem + valueData[i].paymoney
				} else {
					datas.push(valueData[i])
				}
			}
			datas.push({
				paymoney: sumItem,
				subjectfullname: '其他',
				name: '其他'
			})
			sumValueData = sumValueData.toFixed(2)
			this.chartOptionPieTwoAll = {
				title: [{
					text: '{val|' + sumValueData + '}\n{name|' + '支出总额' + '}',
					top: 'center',
					left: 'center',
					align: 'center',
					textStyle: {
						rich: {
							name: {
								fontSize: '14',
								fontWeight: 'normal',
								color: '#000',
								align: 'center',
								// padding: [6, 0]

							},
							val: {
								fontSize: '14',
								fontWeight: 'bolder',
								color: '#000',
								align: 'center'
							}
						}
					}
				}],
				tooltip: {
					trigger: 'item'
				},
				// legend: {
				//   top: 'center',
				//   right: '20%',
				//   orient: 'vertical',

				//   formatter: (name) => {
				//     for (var i = 0; i < datas.length; i++) {
				//       if (datas[i].subjectfullname == name) {
				//         return '{name|' + datas[i].name + '}' + '{oneData|' + datas[i].paymoney + '}' + '{twoData|' + (datas[i].paymoney / (sumValueData > 0 ? sumValueData : 1) * 100).toFixed(2) + '}' + ' %'
				//       }
				//     }
				//   },
				//   textStyle: {
				//     // color: '#D8DDE3',
				//     width: 200,
				//     rich: {
				//       name: {
				//         width: 50,
				//         padding: [0, 0, 0, 10],
				//         align: 'left',
				//         fontSize: '0.12rem',

				//         // color: '#D8DDE3',
				//       },
				//       oneData: {
				//         width: 50,
				//         padding: [0, 0, 0, 10],
				//         // color: '#D8DDE3',
				//         align: 'right',
				//         fontSize: '0.12rem',
				//       },
				//       twoData: {
				//         width: 10,
				//         padding: [0, 0, 0, 10],
				//         align: 'right',
				//         // color: '#D8DDE3',
				//         fontSize: '0.12rem'
				//       }
				//     }
				//   }
				// },
				series: [{
					name: '支出',
					type: 'pie',
					radius: ['70%', '50%'],
					center: ['50%', '50%'],
					avoidLabelOverlap: false,
					label: {
						show: true,
						formatter: (name) => {
							for (var i = 0; i < datas.length; i++) {
								if (datas[i].subjectfullname == name.name) {
									return '{name|' + datas[i].subjectfullname + '}' + '{oneData|' + datas[i].paymoney + '}' + ' 元' + '{twoData|' + (datas[i].paymoney / (sumValueData > 0 ? sumValueData : 1) * 100).toFixed(2) + '}' + ' %'
								}
							}
						},
						textStyle: {
							rich: {
								name: {
									padding: [0, 0, 0, 0],
									align: 'left',
									fontSize: 18,
								},
								oneData: {
									padding: [0, 0, 0, 20],
									align: 'right',
									fontSize: 18,
								},
								twoData: {
									padding: [0, 0, 0, 20],
									align: 'right',
									fontSize: 18
								}
							}
						},
						fontSize: 18,
					},
					labelLine: {
						show: true,
						fontSize: 18,

						normal: {
							length: 120
						}
					},
					emphasis: {
						label: {
							show: true,
							fontSize: 18,
							fontWeight: 'bold'
						}
					},
					data: [
						{ value: datas[0].paymoney, name: datas[0].subjectfullname },
						{ value: datas[1].paymoney, name: datas[1].subjectfullname },
						{ value: datas[2].paymoney, name: datas[2].subjectfullname },
						{ value: datas[3].paymoney, name: datas[3].subjectfullname },
						{ value: datas[4].paymoney, name: datas[4].subjectfullname }
					]
				}]
			}
		},
		fourChange(valueData) {
			valueData.forEach(element => {
				element.value = element.remainmoney
				element.name = element.subjectfullname
			})
			let sumValueData = 0 //支出总额
			valueData.forEach(element => {
				sumValueData = sumValueData + element.remainmoney
				element.namess = element.subjectfullname.length > 6 ? element.subjectfullname.slice(0, 6) + '...' : element.subjectfullname
			})
			let datas = []
			for (let i = 0; i < valueData.length; i++) {
				datas.push(valueData[i])
			}
			sumValueData = sumValueData.toFixed(2)
			this.chartOptionPieThree = {
				title: [{
					text: '{val|' + sumValueData + '}\n{name|' + '结存总额' + '}',
					top: 'center',
					left: '18%',
					// align: 'center',
					textStyle: {
						rich: {
							name: {
								fontSize: '0.12rem',
								fontWeight: 'normal',
								color: '#000',
								align: 'center',
								padding: [6, 0]

							},
							val: {
								fontSize: '0.12rem',
								fontWeight: 'bolder',
								color: '#000',
								align: 'center'
							}
						}
					}
				}],
				tooltip: {
					trigger: 'item'
				},
				legend: {
					right: '10%',
					top: 'center',
					orient: 'vertical',
					height: '100%',
					formatter: (name) => {
						for (var i = 0; i < datas.length; i++) {
							if (datas[i].subjectfullname == name) {
								return '{name|' + datas[i].namess + '}' + '{oneData|' + datas[i].remainmoney + '}' + '{twoData|' + (datas[i].remainmoney / (sumValueData > 0 ? sumValueData : 1) * 100).toFixed(2) + '}' + ' %'
							}
						}
					},
					textStyle: {
						// color: '#D8DDE3',
						width: 200,
						rich: {
							name: {
								width: 40,
								padding: [0, 0, 0, 10],
								align: 'left',
								fontSize: '0.12rem',
								// color: '#D8DDE3',
							},
							oneData: {
								width: 40,
								padding: [0, 0, 0, 10],
								// color: '#D8DDE3',
								align: 'center',
								fontSize: '0.12rem',
							},
							twoData: {
								width: 30,
								padding: [0, 0, 0, 10],
								align: 'right',
								// color: '#D8DDE3',
								fontSize: '0.12rem'
							}
						}
					}
				},
				series: [{
					name: '收入',
					type: 'pie',
					radius: ['50%', '70%'],
					center: ['24%', '50%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						formatter: (name) => {
							for (var i = 0; i < datas.length; i++) {
								if (datas[i].subjectfullname == name.name) {
									return '{name|' + datas[i].namess + '}' + ':' + '{twoData|' + (datas[i].remainmoney / (sumValueData > 0 ? sumValueData : 1) * 100).toFixed(2) + '}' + ' %'
								}
							}
						},
						textStyle: {
							rich: {
								name: {
									align: 'left',
									fontSize: '0.12rem',
									fontWeight: 'bold'

								},
								twoData: {
									padding: [0, 0, 0, 2],
									align: 'right',
									fontSize: '0.12rem',
									fontWeight: 'bold'
								}
							}
						},
						fontSize: '0.12rem',
					},
					labelLine: {
						show: false,
						fontSize: '0.12rem',
						fontWeight: 'bold',
						normal: {
							length: 2
						}
					},
					emphasis: {
						label: {
							show: false,
							fontSize: '0.12rem',
							fontWeight: 'bold'
						}
					},
					data: datas
				}]
			}
			if (document.body.clientWidth <= 1580) {
				this.chartOptionPieThree.legend.show = false
				this.chartOptionPieThree.series[0].center = ['50%', '50%']
				this.chartOptionPieThree.title[0].left = 'center'
				this.chartOptionPieThree.series[0].label.show = true
				this.chartOptionPieThree.series[0].labelLine.show = true
				this.chartOptionPieThree.series[0].emphasis.label.show = true
			}
		},
		fourChangeAll(valueData) {
			valueData.forEach(element => {
				element.value = element.remainmoney
				element.name = element.subjectfullname
			})
			let sumValueData = 0 //支出总额
			valueData.forEach(element => {
				sumValueData = sumValueData + element.remainmoney
				element.namess = element.subjectfullname.length > 6 ? element.subjectfullname.slice(0, 6) + '...' : element.subjectfullname
			})
			let datas = []
			for (let i = 0; i < valueData.length; i++) {
				datas.push(valueData[i])
			}
			sumValueData = sumValueData.toFixed(2)
			this.chartOptionPieThreeAll = {
				title: [{
					text: '{val|' + sumValueData + '}\n{name|' + '结存总额' + '}',
					top: 'center',
					left: 'center',
					align: 'center',
					textStyle: {
						rich: {
							name: {
								fontSize: '14',
								fontWeight: 'normal',
								color: '#000',
								align: 'center',
								// padding: [6, 0]
							},
							val: {
								fontSize: '14',
								fontWeight: 'bolder',
								color: '#000',
								align: 'center'
							}
						}
					}
				}],
				tooltip: {
					trigger: 'item'
				},
				// legend: {
				//   top: 'center',
				//   right: '20%',
				//   orient: 'vertical',

				//   formatter: (name) => {
				//     for (var i = 0; i < datas.length; i++) {
				//       if (datas[i].subjectfullname == name) {
				//         return '{name|' + datas[i].namess + '}' + '{oneData|' + datas[i].remainmoney + '}' + '{twoData|' + (datas[i].remainmoney / (sumValueData > 0 ? sumValueData : 1) * 100).toFixed(2) + '}' + ' %'
				//       }
				//     }
				//   },
				//   textStyle: {
				//     // color: '#D8DDE3',
				//     width: 200,
				//     rich: {
				//       name: {
				//         width: 40,
				//         padding: [0, 0, 0, 10],
				//         align: 'left',
				//         fontSize: '0.12rem',

				//         // color: '#D8DDE3',
				//       },
				//       oneData: {
				//         width: 30,
				//         padding: [0, 0, 0, 10],
				//         // color: '#D8DDE3',
				//         align: 'center',
				//         fontSize: '0.12rem',
				//       },
				//       twoData: {
				//         width: 10,
				//         padding: [0, 0, 0, 10],
				//         align: 'right',
				//         // color: '#D8DDE3',
				//         fontSize: '0.12rem'
				//       }
				//     }
				//   }
				// },
				series: [{
					name: '结存',
					type: 'pie',
					radius: ['70%', '50%'],
					center: ['50%', '50%'],
					avoidLabelOverlap: false,
					label: {
						show: true,
						formatter: (name) => {
							for (var i = 0; i < datas.length; i++) {
								if (datas[i].subjectfullname == name.name) {
									return '{name|' + datas[i].namess + '}' + '{oneData|' + datas[i].remainmoney + '}' + '{twoData|' + (datas[i].remainmoney / (sumValueData > 0 ? sumValueData : 1) * 100).toFixed(2) + '}' + ' %'
								}
							}
						},
						textStyle: {
							rich: {
								name: {
									padding: [0, 0, 0, 0],
									align: 'left',
									fontSize: 18,
								},
								oneData: {
									padding: [0, 0, 0, 20],
									align: 'right',
									fontSize: 18,
								},
								twoData: {
									padding: [0, 0, 0, 20],
									align: 'right',
									fontSize: 18
								}
							}
						},
						fontSize: 18,
					},
					labelLine: {
						show: true,
						fontSize: 18,
						normal: {
							length: 120
						}
					},
					emphasis: {
						label: {
							show: true,
							fontSize: 18,
							fontWeight: 'bold'
						}
					},
					data: datas
				}]
			}
		},
		// 凭证录入图标点击
		voucherEntryClick() {
			this.$router.push({
				path: '/view/accountingAnalysis/voucherEntry/intelligenceEntry',
				query: {
					superior: 'home'
				}
			})
		},
		// 凭证入账图标点击
		voucherPostingChartClick() {
			this.$router.push({
				path: '/view/accountingAnalysis/voucherEntry/manualEntry',
				query: {
					superior: 'home'
				}
			})
		},
		// 凭证查询图标点击
		voucherQueryClick() {
			this.$router.push({
				path: '/view/accountingAnalysis/voucherQuery/voucherQueryJFZ',
				query: {
					superior: 'home'
				}
			})
		},
		// 账簿查询图标点击
		accountBookQueryClick() {
			this.$router.push({
				path: '/view/accountingAnalysis/accountBookQuery/accountBookQueryJFZ',
				query: {
					superior: 'home'
				}
			})
		},
		// 伙食公布图标点击
		monthlyFoodAnnouncementClick() {
			this.$router.push({
				path: '/view/accountingAnalysis/accountingStatements/monthlyFoodAnnouncement',
				query: {
					superior: 'home'
				}
			})
		},
		oneEchartClick() {
			this.$refs['oneEchart'].show = true// 关闭伙食费余额变动曲线图弹框
		},
		twoEchartClick() {
			this.$refs['twoEchart'].show = true// 关闭伙食费余额变动曲线图弹框
			this.twoChangeAll(this.chartOptionPieOneData)
		},
		threeEchartClick() {
			this.$refs['threeEchart'].show = true// 关闭伙食费余额变动曲线图弹框
			this.threeChangeAll(this.chartOptionPieTwoData)
		},
		fourEchartClick() {
			this.$refs['fourEchart'].show = true// 关闭伙食费余额变动曲线图弹框
			this.fourChangeAll(this.chartOptionPieThreeData)
		},
		// 添加科目表单验证
		onOkadd() {
			this.$refs['oneEchart'].show = false// 关闭伙食费余额变动曲线图弹框
			this.$refs['twoEchart'].show = false// 关闭伙食费余额变动曲线图弹框
			this.$refs['threeEchart'].show = false// 关闭伙食费余额变动曲线图弹框
			this.$refs['fourEchart'].show = false// 关闭伙食费余额变动曲线图弹框
		},

	}
}
</script>
<style lang="less" scoped>
.echartAll {
	width: 100%;
	height: calc(~"100vh - 170px");
}

// 左上角标题
.page-title {
	height: 86px;
	display: flex;
	align-items: center;

	&-line {
		width: 4px;
		height: 20px;
		background: #165dea;
	}

	&-text {
		margin-left: 15px;
		font-size: 22px;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}
}

// 内容
.Qbody {
	width: 100%;
	height: calc(~"100vh - 104px");
	// background: red;
	display: flex;
	flex-direction: column;

	// 上半部分
	.bodyTop {
		width: 100%;
		flex: 564;

		.topItem {
			height: 100%;
			width: 100%;
			display: flex;

			// 上半部分 左半部分
			.itemLeft {
				flex: 1056;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;

				// 上半部分 左半部分 上半部分
				.itemLeftTop {
					flex: 115;
					width: 100%;
					height: 100%;
					display: flex;

					.itemLeftTopCar {
						flex: 246;
						background: #ffffff;
						box-shadow: 0px 0.01rem 0.02rem 0px rgba(0, 0, 0, 0.12);
						border-radius: 6px;
						display: flex;
						flex-direction: column;

						.carJG {
							flex: 24;
						}

						.carItem {
							flex: 84;
							width: 100%;
							height: 100%;
							display: flex;

							.cariJG {
								flex: 24;
							}

							.carisJG {
								flex: 16;
							}

							.carImgA {
								flex: 84;
								width: 100%;
								height: 100%;
								background: url("./asstes/leftTopOne.png");
								background-size: 100% 100%;
							}

							.carImgB {
								flex: 84;
								width: 100%;
								height: 100%;
								background: url("./asstes/leftTopTwo.png");
								background-size: 100% 100%;
							}

							.carImgC {
								flex: 84;
								width: 100%;
								height: 100%;
								background: url("./asstes/leftTopThree.png");
								background-size: 100% 100%;
							}

							.carImgD {
								flex: 84;
								width: 100%;
								height: 100%;
								background: url("./asstes/leftTopFour.png");
								background-size: 100% 100%;
							}

							.carText {
								flex: 98;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 0.22rem;
								font-family: PingFangSC-Semibold, PingFang SC;
								font-weight: 600;
								white-space: nowrap;
								color: #333333;
							}
						}
					}

					.itemLeftTopCar:hover {
						transform: scale(1.1);
					}

					.itemLeftTopJG {
						flex: 24;
					}
				}

				// 上半部分 左半部分 间隔
				.itemLeftJG {
					flex: 24;
				}

				// 上半部分 左半部分 下半部分
				.itemLeftBottom {
					flex: 408;
					width: 100%;
					height: 100%;
					background: #ffffff;
					box-shadow: 0px 0.01rem 0.02rem 0px rgba(0, 0, 0, 0.12);
					border-radius: 6px;
					display: flex;
					flex-direction: column;

					.echartTitle {
						flex: 56;
						width: 100%;
						height: 100%;
						display: flex;
						border-bottom: 0.02rem solid rgba(0, 0, 0, 0.06);
						box-sizing: border-box;
						padding: 24px 24px 0 24px;
						flex-direction: column;

						.titleText {
							font-size: 16px;
							font-weight: bold;
							font-weight: bold;
							color: #222;
						}

						.titleTabs {
							justify-content: space-between;
							align-items: center;
						}

						.echartTitleJG {
							flex: 24;
						}

						.echartTitleText {
							flex: 1008;
							display: flex;

							.echartTitleTextOne {
								font-size: 0.16rem;
								font-family: PingFangSC-Semibold, PingFang SC;
								font-weight: 600;
								color: #222222;
								display: flex;
								align-items: center;
								margin-right: 0.1rem;
							}

							.echartTitleTextTwo {
								display: flex;
								align-content: center;
							}
						}
					}

					.itemLeftBottomLine {
						flex: 352;
						display: flex;

						.echartLineJG {
							flex: 24;
						}

						.echartLine {
							flex: 1008;
						}
					}
				}
			}

			// 上半部分 间隔
			.itemJG {
				flex: 24;
			}

			// 上半部分 右半部分
			.itemRight {
				flex: 628;
				background: #ffffff;
				box-shadow: 0px 0.01rem 0.02rem 0px rgba(0, 0, 0, 0.12);
				border-radius: 6px;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;

				.itemRightTitle {
					flex: 100;
					border-bottom: 0.02rem solid rgba(0, 0, 0, 0.06);
					box-sizing: content-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.titleText {
						font-size: 0.16rem;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #222222;
						padding-left: 0.24rem;
						padding-top: 0.24rem;
					}

					.titleTabs {
						padding-left: 0.24rem;
					}
				}

				.itemRightTable {
					flex: 528;
					padding-left: 0.24rem;
					padding-right: 0.24rem;
				}
			}
		}
	}

	// 间隔
	.bodyJG {
		flex: 24;
	}

	// 下半部分
	.bodyBottom {
		width: 100%;
		height: 100%;
		flex: 355;
		background: #ffffff;
		box-shadow: 0px 0.01rem 0.02rem 0px rgba(0, 0, 0, 0.12);
		border-radius: 6px;
		display: flex;
		flex-direction: column;

		.echartTitle {
			flex: 58;
			width: 100%;
			height: 100%;
			display: flex;
			border-bottom: 0.02rem solid rgba(0, 0, 0, 0.06);
			box-sizing: border-box;
			padding: 24px 24px 0 24px;
			flex-direction: column;
			.titleText {
							font-size: 16px;
							font-weight: bold;
							font-weight: bold;
							color: #222;
						}

						.titleTabs {
							justify-content: space-between;
							align-items: center;
						}
			.echartTitleJG {
				flex: 24;
			}

			.echartTitleText {
				flex: 1680;
				display: flex;

				.echartTitleTextOne {
					font-size: 0.16rem;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #222222;
					display: flex;
					align-items: center;
					margin-right: 0.1rem;
				}

				.echartTitleTextTwo {
					display: flex;
					align-content: center;
				}
			}
		}

		.itemLeftBottomLine {
			flex: 244;
			display: flex;
			height: 100%;
			width: 100%;

			.echartsPie {
				height: 100%;
				width: 33%;
				display: flex;
				flex-direction: column;

				.pieTitle {
					margin-left: 0.24rem;
					flex: 36;
					font-size: 0.14rem;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #222222;
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					// position: absolute;
				}

				.pieechart {
					flex: 208;
					height: 100%;
					width: 100%;
				}
			}
		}
	}
}

// 图表上方tabs标签样式
// 当我们需要覆盖element-ui中的样式时只能通过深度作用选择器-样式穿透
::v-deep .echartTitleTextTwo {
	display: flex;
	align-content: center;

	.ivu-tabs {
		display: flex;
		align-items: flex-end;

		.ivu-tabs-bar {
			border-bottom: 1px solid #ffffff;
			margin-bottom: 0px;
			font-size: 0.12rem;

			.ivu-tabs-nav-container {
				.ivu-tabs-nav-wrap {
					.ivu-tabs-nav-scroll {
						.ivu-tabs-nav {
							.ivu-tabs-tab {
								padding: 8px 0px;
							}
						}
					}
				}
			}
		}
	}
}

::v-deep .titleTabs {
	display: flex;
	align-items: flex-end;

	.ivu-tabs {
		display: flex;
		align-items: flex-end;

		.ivu-tabs-bar {
			border-bottom: 1px solid #ffffff;
			margin-bottom: 0px;
			font-size: 0.12rem;

			.ivu-tabs-nav-container {
				.ivu-tabs-nav-wrap {
					.ivu-tabs-nav-scroll {
						.ivu-tabs-nav {
							.ivu-tabs-tab {
								padding: 8px 0px;
							}
						}
					}
				}
			}
		}
	}
}</style>
